<template>
  <div>
    <div>
      <el-row style="background: white">
        <el-col :span="24"><div class="tbUpDiv">
          <img src="src/public/imgs/AO3S5XVHZPX%7B)_K(Y)9WRUL.png" class="tbImg">
          <span class="tbUpPost">我的人才
        </span></div></el-col>
      </el-row>

      <el-row>
        <el-col>
          <div class="tbScenDiv">
            <div style="display: flex;width: 900px;flex-direction: row;justify-content: space-between;margin-top: 20px">
              <div>
                <el-input  placeholder="人才姓名" v-model="souForm.personnelName" @keyup.enter="JobMohu()"/>
              </div>
              <div style="margin-left: 20px">
                <el-input  placeholder="手机号码" v-model="souForm.personnelPhone" @keyup.enter="JobMohu()"/>
              </div>
              <div>
                <span>来源渠道：</span>
                <el-select class="tbScenBipt" v-model="souForm.personnelType" placeholder="请选择">
                  <el-option label="主动投递" value="0" @click="JobMohu()"/>
                  <el-option label="招聘网站" value="1" @click="JobMohu()"/>
                </el-select>
              </div>
              <div style="margin-left: -30px">
                <el-date-picker
                    type="date"
                    style="width: 100%"
                    placeholder="请选择日期"
                    v-model="souForm.personnelDate"
                    format="YYYY/MM/DD"
                    value-format="YYYY-MM-DD"
                    @change="JobMohu()"
                />
              </div>
            </div>
            <div style="margin-top: 20px;margin-right:330px">
              <el-button @click="chongzhi()">重置</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col>
          <el-table :data="d.tableData" style="width: 100%">
            <el-table-column prop="personnelName" label="姓名" width="150" />
            <el-table-column prop="personnelPhone" label="手机号码" width="150" />
            <el-table-column prop="jobdemandName" label="岗位适配" width="150" />
            <el-table-column prop="personnelAchievement" label="工作业绩" width="150" :show-overflow-tooltip="true" />
            <el-table-column prop="personnelSpeciality" label="专业特点" width="150" :show-overflow-tooltip="true" />
            <el-table-column prop="personnelType" label="人才渠道来源" width="150">
              <template #default="s">
                <span v-if="s.row.personnelType==0">主动投递</span>
                <span v-if="s.row.personnelType==1">招聘网站收集</span>
              </template>
            </el-table-column>
            <el-table-column prop="personnelDate" label="人才加入时间" width="150">
                      <template #default="s">
                        <span>{{s.row.personnelDate.slice(0,10)}}</span>
                      </template>
            </el-table-column>
            <el-table-column  label="操作">
              <template #default="s">
              <el-button type="danger" @click="deletestate(s.row.personnelId)">
                移除
              </el-button>
              <el-button @click="interapp(s.row.personnelPhone)">
               面试申请
              </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

      </el-row>
      <el-row justify="center">
        <el-col>
          <el-pagination
              v-model:currentPage="d.pageNo"
              v-model:page-size="d.pageSize"
              :page-sizes="[5,10, 20, 30, 40]"
              small="small"
              layout="total, sizes, prev, pager, next, jumper"
              :total="d.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script  lang="ts" setup>
import {ref, reactive, toRefs, onBeforeMount} from "vue";
import router from "../../router";
import axios from "axios";
import {ElMessage} from "element-plus";

const d = reactive({
  //总记录
  total:0,
  //页码
  pageNo:1,
  //页大小
  pageSize:5,
  //数据
  tableData: [],
});
const ALltableData=ref([])
const getTabelData=()=>{//分页，这里没必要管一样就行
  let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
  let shu = data.splice(
      (d.pageNo - 1) * d.pageSize,
      d.pageSize
  )
  d.tableData = shu ;
}

const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageSize = val ;
  d.pageNo = 1;
  getTabelData();
}

const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
  d.pageNo = val;
  getTabelData();
}
const getDate =()=>{
  axios.post("http://localhost:1688/personnels/selectpersonnel").then((res)=>{
    var data=res.data.data
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
  })
}
//搜索框查询
const souForm=reactive({
  personnelName:'',
  personnelPhone:'',
  personnelType:'',
  personnelDate:'',
})
//选中元素事件,搜索
const JobMohu=()=>{
  axios.post("http://localhost:9884/personnels/selsectPersonMoHu",souForm).then((res)=>{
    var data=res.data.data
    ALltableData.value = data;//放入表格
    d.total = res.data.data.length;//获得它的长度
    getTabelData();//调用方法
  })
  console.log(souForm)
}
//重置搜索
const chongzhi = () => {
      souForm.personnelName='',
      souForm.personnelPhone='',
      souForm.personnelType='',
      souForm.personnelDate='',
      getDate()

}
//拉黑员工
const deletestate=(personnelId)=>{
  axios.post("http://localhost:9884/personnels/updatePerstate/"+personnelId).then((res)=>{
    getDate()
  })
  //面试申请
console.log(personnelId)
}
const interapp=(personnelPhone)=>{
  //判断
  axios.post("http://localhost:9884/Interviews/selectViPhone/"+personnelPhone).then((res)=>{
    if(res.data.data.length>0){
      ElMessage.error('请勿重复申请面试');
    }else {
      router.push({path: '/application',query:{id:personnelPhone}})
    }
  })
  console.log(personnelPhone)
}
onBeforeMount(function () {
  getDate()
})
</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  height: 74px;
  display: flex;
  align-items: center;
}
.tbImg{
  margin-left: 20px;
}
.tbUpPost{
  margin-left: 10px;
  display: flex;
  align-items: center;

}
.tbScenDiv{
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: space-between;
}


.tbScenBipt{
  margin-left: 80px;
  margin-top: -35px;
}

</style>